<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style>
		.row {
			background-color: skyblue;
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			/* 手动指定行高看效果 */
			grid-template-rows: 100px;
			grid-auto-rows: 100px;
		}

		.row>div {
			background-color: salmon;
			margin: 10px;
			/* 默认div就是占据一行  */
			grid-area: auto / auto / auto / span 12;
		}

		/* sm */
		@media screen and (min-width:576px) {
			.row .col-sm-1 {
				grid-area: auto / auto / auto / span 1;
			}

			.row .col-sm-2 {
				grid-area: auto / auto / auto / span 2;
			}

			.row .col-sm-3 {
				grid-area: auto / auto / auto / span 3;
			}

			.row .col-sm-4 {
				grid-area: auto / auto / auto / span 4;
			}

			.row .col-sm-5 {
				grid-area: auto / auto / auto / span 5;
			}

			.row .col-sm-6 {
				grid-area: auto / auto / auto / span 6;
			}

			.row .col-sm-7 {
				grid-area: auto / auto / auto / span 7;
			}

			.row .col-sm-8 {
				grid-area: auto / auto / auto / span 8;
			}

			.row .col-sm-9 {
				grid-area: auto / auto / auto / span 9;
			}

			.row .col-sm-10 {
				grid-area: auto / auto / auto / span 10;
			}

			.row .col-sm-11 {
				grid-area: auto / auto / auto / span 11;
			}

			.row .col-sm-12 {
				grid-area: auto / auto / auto / span 12;
			}
		}

		/* md */
		@media screen and (min-width:768px) {
			.row .col-md-1 {
				grid-area: auto / auto / auto / span 1;
			}

			.row .col-md-2 {
				grid-area: auto / auto / auto / span 2;
			}

			.row .col-md-3 {
				grid-area: auto / auto / auto / span 3;
			}

			.row .col-md-4 {
				grid-area: auto / auto / auto / span 4;
			}

			.row .col-md-5 {
				grid-area: auto / auto / auto / span 5;
			}

			.row .col-md-6 {
				grid-area: auto / auto / auto / span 6;
			}

			.row .col-md-7 {
				grid-area: auto / auto / auto / span 7;
			}

			.row .col-md-8 {
				grid-area: auto / auto / auto / span 8;
			}

			.row .col-md-9 {
				grid-area: auto / auto / auto / span 9;
			}

			.row .col-md-10 {
				grid-area: auto / auto / auto / span 10;
			}

			.row .col-md-11 {
				grid-area: auto / auto / auto / span 11;
			}

			.row .col-md-12 {
				grid-area: auto / auto / auto / span 12;
			}
		}

		/* lg */
		@media screen and (min-width:992px) {
			.row .col-lg-1 {
				grid-area: auto / auto / auto / span 1;
			}

			.row .col-lg-2 {
				grid-area: auto / auto / auto / span 2;
			}

			.row .col-lg-3 {
				grid-area: auto / auto / auto / span 3;
			}

			.row .col-lg-4 {
				grid-area: auto / auto / auto / span 4;
			}

			.row .col-lg-5 {
				grid-area: auto / auto / auto / span 5;
			}

			.row .col-lg-6 {
				grid-area: auto / auto / auto / span 6;
			}

			.row .col-lg-7 {
				grid-area: auto / auto / auto / span 7;
			}

			.row .col-lg-8 {
				grid-area: auto / auto / auto / span 8;
			}

			.row .col-lg-9 {
				grid-area: auto / auto / auto / span 9;
			}

			.row .col-lg-10 {
				grid-area: auto / auto / auto / span 10;
			}

			.row .col-lg-11 {
				grid-area: auto / auto / auto / span 11;
			}

			.row .col-lg-12 {
				grid-area: auto / auto / auto / span 12;
			}
		}

		/* xl */
		@media screen and (min-width:1200px) {
			.row .col-xl-1 {
				grid-area: auto / auto / auto / span 1;
			}

			.row .col-xl-2 {
				grid-area: auto / auto / auto / span 2;
			}

			.row .col-xl-3 {
				grid-area: auto / auto / auto / span 3;
			}

			.row .col-xl-4 {
				grid-area: auto / auto / auto / span 4;
			}

			.row .col-xl-5 {
				grid-area: auto / auto / auto / span 5;
			}

			.row .col-xl-6 {
				grid-area: auto / auto / auto / span 6;
			}

			.row .col-xl-7 {
				grid-area: auto / auto / auto / span 7;
			}

			.row .col-xl-8 {
				grid-area: auto / auto / auto / span 8;
			}

			.row .col-xl-9 {
				grid-area: auto / auto / auto / span 9;
			}

			.row .col-xl-10 {
				grid-area: auto / auto / auto / span 10;
			}

			.row .col-xl-11 {
				grid-area: auto / auto / auto / span 11;
			}

			.row .col-xl-12 {
				grid-area: auto / auto / auto / span 12;
			}
		}

		/* xxl */
		@media screen and (min-width:1400px) {
			.row .col-xxl-1 {
				grid-area: auto / auto / auto / span 1;
			}

			.row .col-xxl-2 {
				grid-area: auto / auto / auto / span 2;
			}

			.row .col-xxl-3 {
				grid-area: auto / auto / auto / span 3;
			}

			.row .col-xxl-4 {
				grid-area: auto / auto / auto / span 4;
			}

			.row .col-xxl-5 {
				grid-area: auto / auto / auto / span 5;
			}

			.row .col-xxl-6 {
				grid-area: auto / auto / auto / span 6;
			}

			.row .col-xxl-7 {
				grid-area: auto / auto / auto / span 7;
			}

			.row .col-xxl-8 {
				grid-area: auto / auto / auto / span 8;
			}

			.row .col-xxl-9 {
				grid-area: auto / auto / auto / span 9;
			}

			.row .col-xxl-10 {
				grid-area: auto / auto / auto / span 10;
			}

			.row .col-xxl-11 {
				grid-area: auto / auto / auto / span 11;
			}

			.row .col-xxl-12 {
				grid-area: auto / auto / auto / span 12;
			}
		}
	</style>
</head>

<body>
	<div class="row">
		<div class="col-sm-6 col-lg-4 col-xl-2">01</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">02</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">03</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">04</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">05</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">06</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">07</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">08</div>
		<div class="col-sm-6 col-lg-4 col-xl-2">09</div>
	</div>
</body>

</html>